<template>
    <div>
      <el-affix :offset="306">
        <el-button class="Drawer"  @click="drawer = true"><img src="../../assets/img/drawer_on.png" alt=""></el-button>
        <el-drawer
            v-model="drawer"
            :direction="direction"
            :with-header="false"
            :size="229"
            :modal="false"
        >
          <div id="DrawerBox">
             <span class="btn" @click="onPageList">
               <img src="../../assets/img/drawer_archives.png" alt="">列表管理
             </span>
            <span class="btn" @click="onEvaluation">
               <img src="../../assets/img/drawer_evaluation.png" alt="">报告管理
             </span>
            <span class="btn" @click="onAnalysis">
               <img src="../../assets/img/drawer_evaluation.png" alt="">数据分析
             </span>
          </div>

          <el-button class="DrawerClose" @click="drawer = false"><img src="../../assets/img/drawer_down.png" alt=""></el-button>
        </el-drawer>
      </el-affix>
    </div>
</template>


<script setup>

import {defineComponent, onMounted, ref, watch} from 'vue'
import {ElMessage} from "element-plus";
import * as api from "../../api/loginHttp";
import {useRoute, useRouter} from "vue-router"
const drawer = ref(false)
const direction = ref('ltr')

const router = useRouter()
const route = useRoute()
const ids = ref()


const fetchData = async () => {
  if(route.params.groupId) {
    ids.value = route.params.groupId
  } else {
    ElMessage.error('栏目编号不得为空')
    await router.push({'path': '/Home'})
  }
}
const onPageList = async () =>{
  await router.push({'path':'/CompanyList/'+ ids.value})
}

const  onEvaluation = async () =>{
  await router.push({'path':'/CompanyReportList/' + ids.value })
}

const onAnalysis = async () => {
  await router.push({'path':'/CompanyAnalysisInfo/' + ids.value })
}
//自动加载
onMounted(() => {
  fetchData()
})

</script>

<style scoped>
@import '../../assets/css/common.css';
.Drawer {
  background:#626aef;
  width:51px;
  height: 226px;
  border-radius: 0px 15px 15px 0px;

  color: #fff;
  font-size: 26px;
  float: left;
  z-index: 999;
}
.DrawerClose {
  background:#626aef;
  width:51px;
  height: 229px;
  border-radius: 0px 15px 15px 0px;
  float:right;
  color: #fff;
  font-size: 26px;
  margin-top: -10%;

}

.drVal {
  text-align: center;
  padding-top: 100px;
}
.btnClick{
  width: 200px;
  height: 100px;
  border-radius: 20px;
  font-size: 16px;
}
#DrawerBox{
  float: left;
  height: 390px;
  width: 83%;
  margin-top: -10%;
  margin-left: -10%;
  background: #626aef;
}
#DrawerBox .btn{
  line-height: 75px;
  height: 70px;
  width: 229px;
  padding-left: 15px;
  font-size: 22px;
  font-weight: 400;
  color: #FFFFFF;
  cursor:pointer;
}
#DrawerBox .btn:hover{
  /*color:#409eff!important*/
}

#DrawerBox .btn img{
  width: 16px;
  height: 16px;
  padding-right: 10px;
}

::v-deep .el-drawer {
  top: 40%;
}
::v-deep .el-drawer__body {
  height: 160px;
}
::v-deep .el-overlay{
  margin-top: 10%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2000;
  width:229px;
  height: 180px;
  overflow: auto;
}

::v-deep .el-drawer.ltr, .el-drawer.rtl {
  height: 226px;
  width:100%;
  top: 306px;
  bottom: 0;
  border: none;
  box-shadow:none;
}

</style>
